<template>
    <div class="input">
        <el-input v-bind="$attrs"  :inheritAttrs="false" v-on="$listeners" v-model="text"  @input="handleInput"></el-input>
    </div>
</template>
<!-- 利用 v-bind="$attrs" 和 v-on="$listeners" 来“继承” el-input 组件的属性和事件 -->
<script>
export default {
    // eslint-disable-next-line vue/multi-word-component-names
    name: 'Input',
    props: {
        value: {
            type: String,
        }
    },
    watch: {
        value(val) { 
            this.text = val
        }
    },
    mounted() {
        this.text = this.value
     },
    data() {
        return {
            text: null
        }
    },
    methods: {
        handleInput(e) { 
            // 调用this.$emit,往上层传递要触发的事件名和数据
            // this.$emit('input', e)
            // 或者
           this.$listeners.input(e)
        }
    },
}
</script>